
<template id="pencil-input2">
    <div>
        <p v-if="showInput == false"
           v-on:mouseenter="showPencil=true"
           v-on:mouseleave="showPencil=false"
           class="form-control-static">
            {{ value }}
            <i v-if="showPencil" v-on:click="pencilClicked" class="fa fa-pencil ml5"></i>
        </p>
        <input v-if="showInput == true"  v-bind:value = "value"
               v-on:blur="statusForBack"
               v-on:input="$emit('input', $event.target.value)"
               class="form-control" v-focus/>
    </div>
</template>
<script>
    Vue.component("pencil-input2", {
        props: ['value'],
        data: function () {
            return {
                showPencil: false,
                showInput: false,
                oldValue: ''
            }
        },
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        methods: {
            pencilClicked: function() {
                this.showPencil = false;
                this.showInput = true;
                this.oldValue = this.value;
            },
            statusForBack: function() {
                this.showPencil = false;
                this.showInput = false;
                if(this.value != this.oldValue){
                    this.$emit('changed', this.value);
                }
            }
        },
        template: '#pencil-input2'
    })
</script>





